<template>
  <div class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png"> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <div class="page-title">
      <p class="title-content">行领导基层调研 | 2019年第4次行长接待日活动</p>
      <p><span class="follow">关注帖子</span></p>
    </div>
    <div class="page-author">
      <div class="user-item">
        <img src="../assets/logo.png" alt="" />

        <div>
          <p class="name">韩新毅（总行 - 办公室）</p>
          <p class="time">
            发表于 2019-07-05 17:32
          </p>
        </div>
      </div>
    </div>
    <div class="page-content">
      <div class="page-main-content main-text">
        2019年7月11日，我行举办2019年第4次行长接待日活动，总行王兵副行长，总行运营及流程管理部、零售银行部、信息科技部、办公室以及梅州分行、郑州分行、长沙分行、南昌分行4家报名分行了此次活动。本次行长接待日活动主题为探讨如何围绕我行营业网点，做好运营、风控、服务、营销的一-体化协调发展,
        并提出建议。
      </div>
      <div class="share-content">
        <div class="share-main-content main-text">
          <div class="share-main-title">
            <div class="p-k">
              <div>
                <p>P</p>
                <div class="rect-1">
                  <p class="rect"></p>
                </div>
              </div>
              <i></i>
              <div>
                <div class="rect-2">
                  <p class="rect"></p>
                </div>
                <p>K</p>
              </div>
            </div>
          </div>
          <span class="text-1">观点:</span>

          产品经理从源头把控，多与上下游沟通，基本上很少会出现砍需求的情况出现;如果遇到突发情况插入的需求，也要判断这个插入需求的合理性，然后去找需求方进行协调;最后一定要砍需求了，也要很清晰的知道那些必须保留，抓大放小。

          <div class="pk-num">
            <div class="left">
              <div class="gesture">
                <icon size="18" name="good-job" />
                <span>正方</span>
              </div>
              <div class="data">
                <div>
                  <p>0%</p>
                  <p>P</p>
                </div>
                <p class="bar"></p>
              </div>
            </div>
            <div class="right">
              <div class="data">
                <div>
                  <p>K</p>
                  <p>0%</p>
                </div>
                <p class="bar"></p>
              </div>
              <div class="gesture">
                <icon size="18" name="good-job" />
                <span>反方</span>
              </div>
            </div>
          </div>
          <p class="text-2">
            备注：全行每位成员公可投票一次；本投票为不记名投票，望各位行员投出自己心目中的一票。
          </p>
        </div>

        <div class="take-part-of-num">
          <span>参与人数</span>
          <span>0</span>
        </div>
      </div>
      <div class="share-operation">
        <div>
          <p>
            <icon size="20" name="good-job" />
            <span>867</span>
          </p>
          <p>
            <icon size="20" name="eye" />
            <span>867</span>
          </p>
        </div>
        <div class="cust-opera">
          <p>
            <span>收起全文</span>
            <icon name="arrow-up" />
          </p>
        </div>
      </div>
    </div>

    <hr />
    <div class="tags-list">
      <p class="tag-item">公司金融</p>
      <p class="tag-item">零售金融</p>
      <p class="tag-item">信审与风控</p>

      <div class="cust-opera">
        <p>
          <span>展开</span>
          <icon name="arrow-down" />
        </p>
      </div>
    </div>

    <div class="replys-list">
      <div class="reply-header">
        <tabs v-model="active" line-width="40px" :ellipsis="false">
          <tab title="专家回复">
            <div class="reply-content">
              <div class="reply-item">
                <div class="user-item">
                  <img src="../assets/logo.png" alt="" />

                  <div>
                    <p class="name">韩新毅 <span> （总行 - 办公室）</span></p>
                    <p class="time">
                      发表于 2019-07-05 17:32
                    </p>
                  </div>
                </div>
                <div class="reply-main-content main-text">
                  2019年7月11日，我行举办2019年第4次行长接待日活动，总行王兵副行长，总行运营及流程管理部、零售银行部、信息科技部、办公室以及梅州分行、郑州分行、长沙分行、南昌分行4家报名分行了此次活动。本次行长接待日活动主题为探讨如何
                  围绕我行营业网点，做好运营、风控、服务、营销的一体化协调发展，并提出建议。
                  <p>
                    <img
                      src="../assets/lefty-kasdaglis-H_0QzH3tBiM-unsplash.jpg"
                      alt=""
                    />
                  </p>
                  2019年7月11日，我行举办2019年第4次行长接待日活动，总行王兵副行长，总行运营及流程管理部、零售银行部、信息科技部、办公室以及梅州分行、郑州分行、长沙分行、南昌分行4家报名分行了此次活动。本次行长接待日活动主题为探讨如何围绕我行营业网点，做好运营、风控、服务、营销
                  的一体化协调发展，并提出建议。
                </div>
                <div class="reply-comments main-text">
                  <div class="reply-comment-item">
                    <p>
                      <span>陈俊波：</span>
                      <span>分行领导后备人才选民主推荐活动有关事项。</span>
                    </p>
                    <p></p>
                  </div>
                  <div class="reply-comment-item">
                    <p>
                      <span>李寿俊：</span>
                      <span
                        >本次行长接待日活动主题为探讨如何围绕我行营业网点，做好运营、风控、服务、营销的一-体化协调发展。</span
                      >
                    </p>
                    <p></p>
                  </div>
                  <div class=" cust-opera see-more">
                    <p>
                      <span>查看全部评论</span>
                      <icon name="arrow" />
                    </p>
                  </div>
                </div>
                <div class="share-operation">
                  <div>
                    <p>
                      <icon size="20" name="chat" />
                      <span>867</span>
                    </p>
                    <p>
                      <icon size="20" name="good-job" />
                      <span>867</span>
                    </p>

                    <p>
                      <icon size="20" name="eye" />
                      <span>867</span>
                    </p>
                  </div>
                  <div class="cust-opera">
                    <p>
                      <span>收起全文</span>
                      <icon name="arrow-up" />
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </tab>
          <tab title="其他回复">其他回复</tab>
          <tab title="邀请列表">邀请列表</tab>
        </tabs>
      </div>
    </div>

    <div class="next-reply cust-opera">
      <p>
        <icon name="arrow-down" />
        <span>下一个回复</span>
      </p>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import { Button, Icon, Tab, Tabs } from "vant";

export default {
  name: "Home",
  components: {
    Button,
    Icon,
    Tab,
    Tabs
  }
};
</script>

<style lang="less" scoped>
.home {
  padding: 10px 30px;
  text-align: left;
}
.page-title {
  display: flex;
}
.title-content {
  font-size: 20px;
  font-weight: bolder;
  flex: 1;
}
.follow {
  display: inline-block;
  margin: 0 10px;
  margin-right: 0;
  padding: 2px 4px;
  border: 1px solid #b93e22;
  color: #b93e22;
  border-radius: 5px;
  font-size: 13px;
}

.user-item {
  display: flex;
  align-items: center;
  padding: 10px 0;

  div {
    margin-left: 5px;
  }

  img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
  }

  .name {
    font-size: 15px;
    font-weight: bold;
  }

  .time {
    font-size: 11px;
  }
}

.page-main-content {
  text-indent: 2em;
}

.main-text {
  font-size: 15px;
  line-height: 24px;
  text-align: justify;

  img {
    margin: 10px 0;
    max-width: 100%;
    border-radius: 5px;
  }
}
.p-k {
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  // justify-content: space-around;
  font-weight: bold;
  transform: scale(0.8);
  height: 24px;

  i {
    display: inline-block;
    width: 12px;
  }
  & > div {
    position: relative;
    display: flex;
    color: #fff;
    padding: 1px 6px;
  }

  & > div:last-child {
    // overflow: hidden;
    background-color: #2e77b8;
    transform: rotateX(180deg);

    & > p {
      transform: rotateX(180deg);
    }
  }
  & > div:first-child {
    background-color: #b93e21;
  }

  .rect-1 {
    transform: rotateY(-180deg);
    position: absolute;
    right: -26px;

    .rect {
      border-left: 15px solid #b93e22;
    }
  }

  .rect-2 {
    position: absolute;
    left: -26px;
    transform: rotateY(180deg) rotateY(180deg);

    .rect {
      border-left: 15px solid #2e77b8;
    }
  }

  .rect {
    // width: 10px;
    // height:10px;
    // margin-top: 4px;
    position: absolute;
    left: 14px;
    top: 7px;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 32px solid transparent;
    transform: translate(0%, -50%) scale(0.8) rotateY(180deg);
  }
}

.pk-num {
  display: flex;
  margin: 15px 0;
  font-size: 14px;

  .gesture {
    width: 50px;
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 50%;
    box-shadow: 1px 1px 2px 1px #cfd2da;
  }

  .bar {
    height: 10px;
    box-shadow: 1px 1px 2px 1px #cfd2da;
  }

  .left {
    display: flex;
    flex: 1;

    .gesture {
      background-color: #3d9ff6;
    }

    .bar {
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;

      background-color: #3d9ff6;
    }

    .data {
      margin-left: 10px;
      color: #3d9ff6;
    }
  }

  .right {
    display: flex;
    flex: 1;

    .gesture {
      background-color: #d64927;

      .van-icon {
        transform: rotateY(-180deg);
      }
    }

    .bar {
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;

      background-color: #d64927;
    }

    .data {
      margin-right: 10px;
      color: #d64927;
    }
  }

  .data {
    flex: 1;

    & > div {
      display: flex;
      justify-content: space-between;
    }
  }
}

.share-main-content {
  margin-top: 20px;
  background-color: #f3f4f6;
  padding: 15px;
  border-radius: 10px;
  padding-top: 40px;
  position: relative;

  & > .text-1 {
    font-size: 16px;
    font-weight: bold;
    color: #4ca5f6;
  }
  & > .text-2 {
    margin-top: 10px;
    line-height: 1.5;
    font-size: 11px;
    color: #9ca8b6;
  }
}

.share-main-title {
  display: flex;
  display: inline-block;
}

.share-content {
  position: relative;
}

.take-part-of-num {
  font-size: 11px;
  position: absolute;
  top: 0;
  right: 10px;
  background-color: #fff;
  padding: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: 1px 1px 1px #cfd2da;

  & > span:last-child {
    color: #ee5219;
    padding: 0 10px;
  }
}

.share-operation {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin: 15px 0;
  position: relative;

  & > div {
    display: flex;
  }

  & p {
    margin-right: 10px;
    display: flex;
    align-items: center;
    color: #c2c9d2;

    span {
      color: #8594a6;
      padding-left: 5px;
    }
  }
}

hr {
  border: 0.5px solid #f2f2f2;
}

.cust-opera {
  font-size: 14px;
  position: absolute;
  right: 0;

  & p {
    margin-right: 10px;
    display: flex;
    align-items: center;
    color: #c2c9d2;

    span {
      color: #8594a6;
      padding-left: 5px;
    }
  }
}

.tags-list {
  display: flex;
  position: relative;
  margin: 15px 0;

  .tag-item {
    background-color: #f5f8fa;
    padding: 1px 8px;
    font-size: 14px;
    color: #8997a9;
    border-radius: 10px;
    margin-right: 10px;
  }
}

.reply-header {
  padding-top: 10px;
}

.reply-content{
  padding-top: 10px;
}

.reply-main-content {
  margin-left: 45px;
}

.reply-item {
  .share-operation {
    margin-left: 45px;
  }
  .user-item {
    span {
      font-weight: normal;
      font-size: 14px;
    }
  }
}

.reply-comments {
  margin-top: 15px;
  margin-left: 45px;
  padding: 10px;
  border-radius: 5px;
  background-color: #f3f4f6;
  font-size: 14px;

  .reply-comment-item {
    margin-bottom: 10px;

    & > p > span:first-child {
      font-weight: bold;
    }

    & > p > span:last-child {
      color: #828282;
    }
  }

  .see-more {
    position: relative;

    span {
      padding-left: 0;
    }
  }
}
</style>
<style lang="less">
.home {
  .van-tab {
    text-align: left;
    width: 56px !important;
    flex: none !important;
    margin-right: 10px;
    padding: 0;
  }
  .van-tabs__line {
    // transform: translateX(-86%) !important;
    display: none;
  }

  .van-tab--active {
    border-bottom: 3px solid #d64927;
    color: #d64927;
  }

  .van-hairline--top-bottom::after {
    border-top: 0;
  }
}

.next-reply {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 1px 1px 2px 1px #cfd2da;
  padding: 5px;
  position: fixed !important;
  bottom: 20px;
  right: 20px !important;
  background-color: #fff;
  opacity: 0.9;

  p {
    margin-right: 0 !important;
  }
}
</style>
